<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>11简版小广告</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        @keyframes heartBeat {
            0% {
                transform: scale(1)
            }

            14% {
                transform: scale(1.1)
            }

            28% {
                transform: scale(1)
            }

            42% {
                transform: scale(1.1)
            }

            70% {
                transform: scale(1)
            }
        }

        .ad {
            width: 300px;
            height: 250px;
            background-color: #000;
            position: fixed;
            bottom: 5px;
            right: 5px;
            color: #fff;
            animation: heartBeat 3s linear infinite;
            /* display: none; */
        }

        .ad .title {
            overflow: hidden;
            width: 100%;
        }

        .ad .title .countBox {
            float: left;
        }

        .ad .title .close {
            float: right;
            width: 20px;
            height: 20px;
            background-color: rgba(255, 255, 255, .3);
            text-align: center;
            line-height: 20px;
            cursor: pointer;
        }

        .ad img {
            width: 100%;
            height: 200px;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <!-- <div class="ad">
		<div class="title" data-tag="true">
			<div class="countBox">距离广告关闭还有<span class="count">10</span>秒</div>
			<div class="close">×</div>
		</div>
		<img src="../images/bzsc-dgbhz-300-250-7-5.gif" alt="">
	</div> -->
</body>
<script>
    //小广告在页面停留3s后出现
    //且出现10s倒计时，10s后，小广告自行关闭；
    //用户点击关闭按钮，也可关闭小广告

    // 问题 
    // 1. 点击ad跳转百度
    // 2. 点击close 关闭小广告
    // 3. click: close -> title -> ad   => 点击close关闭小广告 => 冒泡到ad,跳转百度
    // 4. 解决方法: 阻止点击事件传播到ad (ad之前阻止皆可)



    var timer = null;

    loop();

    function loop(delay) {

        delay = (delay == undefined ? 3000 : delay);  // 参数的默认值 => 可选参数


        // 延迟3s后 动态生成小广告  (3s内可以清除延时器 => 不会启动  3s后延时器已启动 => 在清除延时器没有用(倒计时结束之后再次调用loop))
        clearTimeout(timer);
        timer = setTimeout(function () {
            // debugger;
            var ad = document.createElement("div");
            ad.setAttribute("class", "ad");

            ad.onclick = function(){
                location.href="https://www.baidu.com";
            }

            var title = document.createElement("div");
            title.setAttribute("class", "title");
            title.setAttribute("data-tag", "true");
            ad.appendChild(title);

            var countBox = document.createElement("div");
            countBox.setAttribute("class", "countBox");
            countBox.innerHTML = `距离广告关闭还有<span class="count">10</span>秒`;
            title.appendChild(countBox);

            var close = document.createElement("div");
            close.setAttribute("class", "close");
            close.innerHTML = `×`;
            title.appendChild(close);

            close.onclick = function (e) {
                clearTimeout(timer);
                clearInterval(intervalTimer);
                ad.remove();
                loop();

                // 在close上阻止click事件继续向后传播
                if (e.stopPropagation) {
                    e.stopPropagation();
                } else {
                    e.cancelBubble = true;
                }
            }

            var img = document.createElement("img");
            img.setAttribute("src", "../images/bzsc-dgbhz-300-250-7-5.gif");
            img.setAttribute("alt", "");
            ad.appendChild(img);

            document.body.appendChild(ad);

            var count = 10;
            var intervalTimer = setInterval(function () {
                count--;
                countBox.innerHTML = `距离广告关闭还有<span class="count">${count}</span>秒`;
                if (count <= 0) {
                    clearInterval(intervalTimer);
                    ad.remove();
                    loop();
                }
            }, 1000)
        }, delay);
    }

    // 总结:JS动态生成
    // 1. 模板字符串  =>  先使用模板字符串拼接,最后在放到页面中 (案例:日历) 
    //    优点: 可以根据既定的模板快速生成html结构 
    //    缺点: 模板字符串 => 在没有放到页面之前都是字符串  => 无法在字符串中绑定事件 (等待生成之后再获取元素绑定事件)
    
    // 2. DOM创建 
    //    优点: 创建的元素=> 元素节点 => 可以操作元素改变属性/样式/内容 /绑定事件
    //    缺点: 对于复杂的html结构 => 常见起来比较麻烦 => 一般用来写插件 

</script>

</html>